Vue3新特性-片段

发表于 | 分类于 |
字数统计: 188 字 | 阅读时长 ≈ 1 分钟

概览

Vue 3 现在正式支持了多根节点的组件，也就是片段！

2.x 语法

在 2.x 中，由于不支持多根节点组件，当开发者意外创建一个时会发出警告。为了修复这个问题，许多组件被包裹在一个 <div> 中。

1
2
3
4
5
6
7
8
<!-- Layout.vue -->
<template>
  <div>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</template>

3.x 语法

在 3.x 中，组件可以包含多个根节点！但是，这要求开发者显式定义 attribute 应该分布在哪里。

1
2
3
4
5
6
<!-- Layout.vue -->
<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>